<template>
  <!-- 会议管理-新增表单 -->
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>

          <a-col :span="24">
            <a-form-item label="会议组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['groupName', {rules: [{required: true, message: '请输入会议组名称!'}]}]" placeholder="请输入会议组名称"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="专题类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['topicType', {rules: [{required: true, message: '请选择专题类型!'}]}]" :trigger-change="true" dictCode="sc_situation_index_catalog,catalog_name,catalog_code" placeholder="请选择专题类型" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['groupType']" :trigger-change="true" dictCode="group_type" placeholder="请选择会议类型" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="选择成员">
              <div class="tuceng">
                <!-- 左 -->
                <div class="left">
                  <div class="left_top">
                    <a-checkbox :indeterminate="indeterminate">
                      组织架构
                    </a-checkbox>
                    <a-input-search placeholder="输入部门或成员名称" style="width: 250px; right:-30%;" />
                  </div>
                  <AddressBookManage @addmemberId="addmemberId" @deletememberId="deletememberId" />
                </div>

                <!-- 右 -->
                <div class="right">
                  <div class="right_top">
                    <a-checkbox :indeterminate="lindeterminate" :checked="lcheckAll" @change="lonCheckAllChange">
                      已选列表
                    </a-checkbox>
                    <span class="text">{{this.nameArr.length}}人</span>
                  </div>
                  <a-list bordered :data-source="this.nameArr" :pagination="ipagination">
                    <a-list-item slot="renderItem" slot-scope="item" style="padding-left:65px;">
                      <a-icon type="check-circle" style="color:rgb(24,144,255)" />&nbsp;&nbsp;&nbsp;
                      {{ item.contactName }}
                    </a-list-item>
                  </a-list>
                </div>
              </div>
            </a-form-item>
          </a-col>

          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import AddressBookManage from './ScSubjectMeetingAddress.vue'
// import AddressBookTable from './ScSubjectMeetingAddressTable.vue'

export default {
  name: 'ScSubjectMeetingGroupForm',
  components: {
    AddressBookManage
    // departList, scSubjectMeetingGroupMemberForm
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => { },
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      selectedKeys: [],
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
      },
      topicList: [],
      url: {
        add: '/subject/scSubjectMeetingGroup/add',
        edit: '/subject/scSubjectMeetingGroup/edit',
        queryById: '/subject/scSubjectMeetingGroup/queryById'
      },
      visible: false,
      titles: '添加图层',
      // form: this.$form.createForm(this, { name: 'coordinated' }),
      indeterminate: true,
      checkAll: false,
      lindeterminate: true,
      lcheckAll: false,
      current: 1,
      rightList: [],
      nameArr: [],
      // // 分页参数
      ipagination: {
        current: 1,
        pageSize: 7,
        showTotal: (total, range) => {
          return ''
        },
        showQuickJumper: false,
        showSizeChanger: false,
        total: 0
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    addmemberId(data) {
      this.nameArr.push(data)
      console.log(this.nameArr)
    },
    deletememberId(data) {
      for (const i in this.nameArr) {
        if (this.nameArr[i].id === data.id) {
          this.nameArr.splice(i, 1)
          break
        }
      }
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.initialDictList()
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'groupName', 'groubmembers', 'topicType', 'groupType'))
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        const params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const formData = Object.assign(this.model, values)
          const groupmembers = []
          this.nameArr.forEach((item, index) => {
            const member = {
              memberId: item.id
            }
            groupmembers.push(member)
          })
          formData.groupmembers = groupmembers

          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    initialDictList() {
      getAction('/subject/scSubjectLayerInfo/getTopicList').then(res => {
        if (res.success) {
          this.topicList = res.result
        }
      })
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'groupName', 'groubmembers', 'topicType', 'groupType'))
    },
    rightClick() {
      this.rightList = this.checkedList
      // this.rightList.push(this.checkedList)
    },
    leftClick() {
      this.checkedList = this.rightList
    },

    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleOk(e) {
      // console.log(e)
      this.visible = false
    },
    handleCancel(e) {
      // console.log(e)
      this.visible = false
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleSelectChange(value) {
      console.log(value)
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
      })
    },
    onRightChange(rightList) {
      this.lindeterminate = !!rightList.length && rightList.length < this.rightList.length
      this.lcheckAll = rightList.length === this.rightList.length
      console.log('已选择列表', this.rightList)
    },
    lonCheckAllChange(e) {
      Object.assign(this, {
        rightList: e.target.checked ? this.rightList : [],
        lindeterminate: false,
        lcheckAll: e.target.checked
      })
    },
    // 左侧分页点击
    onLeftChange(page) {
      this.current = page
      // console.log('页码', this.current)
      // console.log(this.checkedList)
    },
    onSelect(selectedKeys, e) {
      // console.log('[ e ] >', selectedKeys, e)
      const record = e.node.dataRef
      // 代表是最底层
      this.getGroupDetail(record)
      this.currSelected = record
      this.selectedKeys = selectedKeys
      console.log('record', this.currSelected)
      this.selectType = this.currSelected.type
    },
    getCurrSelectedTitle() {
      return this.currSelected.name || this.currSelected.layerName
    },
    onClearSelected() {
      this.currSelected = null
      this.form.resetFields()
      this.selectedKeys = []
      this.selectType = 0
    }

  }
}
</script>
<style lang="less" scoped>
.tuceng {
  width: 100%;
  display: flex;
  border: 1px solid rgba(242, 242, 242, 1);
  padding: 10px;
  border-radius: 5px;
  .left {
    border: 1px solid rgba(242, 242, 242, 1);
    width: 70%;
    ::v-deep .ant-checkbox-group {
      display: flex;
      flex-direction: column;
      margin: 0px 10px;
      // align-items: center;
      ::v-deep .ant-checkbox-wrapper {
        margin: 6px 2px;
      }
    }
    .left_top {
      border-bottom: 1px solid #e9e9e9;
      background: rgba(242, 242, 242, 1);
      padding: 5px 10px;
      height: 47px;
      .text {
        float: right;
        color: #999999;
        font-size: 12px;
      }
    }
    .left_bottom {
      margin-top: 10px;
      height: 42px;
      border-top: 1px solid #e9e9e9;
      padding: 10px 0px;
      text-align: center;
    }
  }

  .right {
    border: 1px solid rgba(242, 242, 242, 1);
    width: 30%;
    ::v-deep .ant-checkbox-group {
      display: flex;
      flex-direction: column;
      margin: 0px 10px;
      // align-items: center;
      ::v-deep .ant-checkbox-wrapper {
        margin: 6px 2px;
      }
    }
    .right_top {
      border-bottom: 1px solid #e9e9e9;
      background: rgba(242, 242, 242, 1);
      padding: 5px 10px;
      height: 47px;
      .text {
        float: right;
        color: #999999;
        font-size: 12px;
      }
    }
    .left_bottom {
      margin-top: 10px;
      height: 42px;
      border-top: 1px solid #e9e9e9;
      padding: 10px 0px;
      text-align: center;
    }
  }
}
</style>
